
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>薪酬标准制定</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #333;
            padding: 10px 20px;
            color: white;
        }

        .navbar .logo img {
            height: 40px;
        }

        .navbar .system-name {
            flex: 1;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }

        .navbar .titles a {
            text-decoration: none;
            color: white;
            font-weight: bold;
        }

        .navbar .titles a:hover {
            text-decoration: underline;
        }

        /* 页面布局 */
        .main-container {
            display: flex;
            height: calc(100vh - 60px); /* 除去导航栏的高度 */
        }

        /* 左侧垂直菜单样式 */
        .sidebar {
            width: 200px;
            border-right: 1px solid #ccc;
            background-color: #f9f9f9;
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .menu-item {
            position: relative;
            cursor: pointer;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .menu-item:hover {
            background-color: #e0e0e0;
        }

        .menu-item:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            background-color: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            white-space: nowrap;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .submenu {
            display: none;
            background-color: #fff;
            padding-left: 20px;
            margin-top: 5px;
            border-left: 2px solid #ccc;
        }

        .submenu a {
            display: block;
            padding: 5px 0;
            color: #333;
            text-decoration: none;
        }

        .submenu a:hover {
            text-decoration: underline;
        }

        .menu-item.active .submenu {
            display: block;
        }

        /* 中间内容区域样式 */
        .content {
            flex: 1;
            padding: 20px;
            background-color: #fff;
            overflow-y: auto;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        }

        /* 表格容器样式 */
        .tables-container {
            width: 65%; /* 设置宽度为页面宽度的 65% */
            margin: 20px auto; /* 设置框距顶部的距离 */
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .tables-container h2 {
            text-align: center;
            font-size: 30px;
            margin-bottom: 10px; /* 更小的上边距 */
        }

        /* 第二个表格：薪酬标准详情 */
        .table-2 {
            width: 100%;
        }

        .table-2 table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        .table-2 th, .table-2 td {
            text-align: left;
            padding: 8px;
            border: 1px solid #ddd;
            height: 40px; /* 增加单元格高度 */
        }

        .table-2 th {
            background-color: #f2f2f2;
        }

        .table-2 td {
            background-color: #fafafa;
        }

        .table-2 .row-header {
            font-weight: bold;
            width: 150px;
        }

        /* 第一个表格：薪酬项目 */
        .table-1 table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 40px;
        }

        .table-1 th, .table-1 td {
            text-align: center;
            padding: 8px;
            border: 1px solid #ddd;
        }

        .table-1 th {
            background-color: #f2f2f2;
        }

        .table-1 td {
            background-color: #fafafa;
        }

        /* 调整下拉框样式 */
        select {
            width: 200px; /* 增加宽度 */
            padding: 5px;
            font-size: 16px;
        }

        /* 提交按钮样式 */
        .submit-button {
            width: 100%;
            padding: 10px;
            font-size: 18px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            margin-top: 20px;
        }

        .submit-button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="navbar">
    <div class="logo">
        <img src="/image/校徽.png" alt="图标">
    </div>
    <div class="system-name">人力资源管理系统</div>
    <div class="titles">
        <a href="index_jingli.jsp">首页</a>
        <a href="humanQuery">关于</a>
        <a href="#contact">联系我们</a>
    </div>
</div>

<!-- 页面主体布局 -->
<div class="main-container">
    <!-- 左侧垂直菜单 -->
    <div class="sidebar">
        <div class="menu-item" data-tooltip="人力资源管理模块">
            人力资源管理模块
            <div class="submenu">
                <a href="yuangongAdd_jingli.jsp">添加档案</a>
                <a href="humanQuery">档案查询和管理</a>
            </div>
        </div>
        <div class="menu-item" data-tooltip="管理薪酬">薪酬管理模块
            <div class="submenu">
                <a href="salaryStandard.jsp">薪酬标准制定</a>
            </div></div>

    </div>

    <!-- 中间内容区域 -->
    <div class="content">
        <!-- 表格容器 -->
        <div class="tables-container">
            <h2>薪酬标准制定</h2>

            <!-- 第二个表格：薪酬标准详情 -->
            <div class="table-2">
                <table>
                    <tbody>
                    <!-- 第一行：薪酬标准编号，薪酬标准名称（替换为选择部门），薪酬总额 -->
                    <tr>
                        <td class="row-header">薪酬标准编号</td>
                        <td><input type="text" id="salaryId" readonly /> <!-- 添加 readonly 使其只读 --></td>
                        <td class="row-header">选择部门</td>
                        <td>
                            <select name="department" id="department">
                                <option value="" disabled selected>请选择部门</option> <!-- 修改默认选项 -->
                                <option value="前端开发组">前端开发组</option>
                                <option value="后端开发组">后端开发组</option>
                                <option value="销售组">销售组</option>
                                <option value="策划组">策划组</option>
                            </select>
                        </td>
                        <td class="row-header" >薪酬总额</td>
                        <td><input type="number" id="totalSalary" value="0.00" readonly /></td>
                    </tr>

                    <!-- 第二行：制定人，登记人，登记时间 -->
                    <tr>
                        <td class="row-header" >制定人</td>
                        <td><input type="text" id="creatorNameInput" readonly/></td>
                        <td class="row-header">登记人</td>
                        <td><input type="text" id="registrar" value="staff" readonly/></td>
                        <td class="row-header">登记时间</td>
                        <td><input type="text" /></td>
                    </tr>
                    </tbody>
                </table>
            </div>


            <!-- 薪酬项目表格 -->
            <div class="table-1">
                <table class="table-1">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>薪酬项目名称</th>
                        <th>金额</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>基本工资</td>
                        <td><input type="number" id="basicSalary" step="0.01" value="0.00" onchange="calculateSalary()" /></td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>补助金额</td>
                        <td><input type="number" id="allowance" step="0.01" value="0.00" onchange="calculateSalary()" /></td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>养老保险</td>
                        <td><input type="number" id="pensionInsurance" value="0.00" readonly /></td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>医疗保险</td>
                        <td><input type="number" id="medicalInsurance" value="0.00" readonly /></td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>失业保险</td>
                        <td><input type="number" id="unemploymentInsurance" value="0.00" readonly /></td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>住房公积金</td>
                        <td><input type="number" id="housingFund" value="0.00" readonly /></td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <!-- 提交按钮 -->
            <button class="submit-button" onclick="submitForm()">提交</button>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 原始脚本部分 -->
<script>
    // 确保DOM加载完成再执行JavaScript
    window.addEventListener('DOMContentLoaded', function() {
        // 获取部门选择的事件
        document.getElementById('department').addEventListener('change', function() {
            const selectedDepartmentName = this.value;  // 获取选中的部门名称

            // 打印选中的部门名称到控制台
            console.log('选中的部门：', selectedDepartmentName);

            // 构建请求数据
            const departmentData = {
                department_name: selectedDepartmentName
            };

            // 发送请求到后端获取部门ID和薪酬标准ID
            fetch('/department/getSalaryId', {  // 确保路径是正确的
                method: 'POST',
                body: JSON.stringify(departmentData), // 发送部门名称
                headers: {
                    'Content-Type': 'application/json'  // 设置内容类型为JSON
                }
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应失败，状态码：' + response.status);
                    }
                    return response.json();  // 将响应体解析为 JSON
                })
                .then(data => {

                    console.log('响应数据:', data);  // 打印返回的 JSON 数据

                    if (data.code === 1 && data.data) {
                        console.log('此时进入了，code=1');
                        // 获取后端返回的数据
                        const departmentId = data.data.department_id;
                        const salaryId = data.data.salary_id;
                        console.log('salaId1为', salaryId);

                        // 填充薪酬标准编号
                        document.getElementById('salaryId').value = salaryId;  // 填充到输入框中
                        console.log('成功');
                    } else {
                        alert('查询失败：' + (data.msg || '未找到对应的薪酬标准'));
                    }
                })
                .catch(error => {
                    console.log('失败');
                    console.error('请求错误:', error);  // 打印请求错误信息
                    alert('请求失败，请稍后重试');
                });
        });
    });

    // 计算薪酬项目并自动更新总额
    function calculateSalary() {
        // 获取输入的基本工资和补助金额
        const basicSalary = parseFloat(document.getElementById("basicSalary").value) || 0.00;
        const allowance = parseFloat(document.getElementById("allowance").value) || 0.00;

        // 计算各项保险和公积金
        const pensionInsurance = (basicSalary * 0.08).toFixed(2);
        const medicalInsurance = (basicSalary * 0.02 + 3).toFixed(2);
        const unemploymentInsurance = (basicSalary * 0.005).toFixed(2);
        const housingFund = (basicSalary * 0.08).toFixed(2);

        // 更新只读输入框
        document.getElementById("pensionInsurance").value = pensionInsurance;
        document.getElementById("medicalInsurance").value = medicalInsurance;
        document.getElementById("unemploymentInsurance").value = unemploymentInsurance;
        document.getElementById("housingFund").value = housingFund;

        // 计算薪酬总额
        const totalSalary = (basicSalary + allowance - pensionInsurance - medicalInsurance - unemploymentInsurance - housingFund).toFixed(2);
        document.getElementById("totalSalary").value = totalSalary;
    }

    // 提交表单（这里可以将数据发送到后端）
    // 提交表单（这里可以将数据发送到后端）
    function submitForm() {
        // 获取所有表单字段
        const basicSalary = parseFloat(document.getElementById("basicSalary").value) || 0.00;
        const allowance = parseFloat(document.getElementById("allowance").value) || 0.00;
        const totalSalary = parseFloat(document.getElementById("totalSalary").value) || 0.00;
        const departmentName = document.getElementById("department").value;
        const creatorName = document.getElementById("creatorNameInput").value;  // 制定人
        const registrar = document.getElementById("registrar").value;  // 登记人（固定为staff）
        const registrationTime = document.getElementById("registrationTime") ? document.getElementById("registrationTime").value : '';  // 登记时间

        // 输出提交的数据（用于调试）
        console.log("部门:", departmentName);
        console.log("基本工资:", basicSalary);
        console.log("补助金额:", allowance);
        console.log("薪酬总额:", totalSalary);
        console.log("制定人:", creatorName);
        console.log("登记人:", registrar);  // 会输出“staff”
        console.log("登记时间:", registrationTime);

        // 构建要提交的数据
        const formData = {
            departmentName,
            basicSalary,
            allowance,
            totalSalary,
            creatorName,
            registrar,  // 将“staff”作为登记人传递
            registrationTime
        };

        // 发起 POST 请求，提交数据到后端
        fetch('/department/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(formData)  // 将数据转换为 JSON 字符串
        })
            .then(response => response.json())  // 解析响应为 JSON
            .then(data => {
                if (data.code === 1) {
                    alert("薪酬标准已提交成功！");
                } else {
                    alert("提交失败: " + (data.msg || "未知错误"));
                }
            })
            .catch(error => {
                console.error('请求失败:', error);
                alert('提交失败，请稍后重试');
            });
    }





    // JavaScript 代码：为菜单项添加点击事件，切换子菜单的显示/隐藏
    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', function() {
            // 切换当前菜单项的 active 类
            this.classList.toggle('active');
        });
    });
    // 在页面加载时自动发送请求获取当前用户姓名并填充
    console.log("1页面加载完成，准备获取当前用户姓名...");
    $(document).ready(function() {
        console.log("2页面加载完成，准备获取当前用户姓名...");
        $.ajax({
            url: '/department/getCurrentUserName',
            method: 'GET',
            success: function(response) {
                if (response.code === 1) {
                    var name = response.data;
                    console.log("获取到的用户名：", name);
                    $('#creatorNameInput').val(name);
                } else {
                    console.error('获取用户姓名失败：' + response.msg);
                    $('#creatorNameInput').val('未知');
                }
            },
            error: function(xhr, status, error) {
                console.error('请求失败：', error);
                $('#creatorNameInput').val('请求失败');
            }
        });
    });

</script>

</body>
</html>
